<template>
  <div class="data">
    <el-card>
      <div id="main1"></div>
    </el-card>
    <el-card>
      <div id="main2"></div>
    </el-card>
  </div>
</template>

<script>
import { getFunc } from "@/utils/http.js";
export default {
  data() {
    return {
      list: [],
      payer_num: [],
      name: [],
    };
  },
  methods: {
    async getData() {
      // 请求商品列表
      await getFunc("/shop/list").then((data) => {
        if (data.code == 200) {
          this.list = data.result;
          this.list.forEach((item) => {
            this.payer_num.push(item.payer_num);
            this.name.push(item.name);
          });
          let myChart = this.$echarts.init(document.querySelector("#main1"));
          myChart.setOption({
            title: {
              text: "销售数量",
            },
            tooltip: {},
            xAxis: {
              data: this.name,
            },
            yAxis: {},
            series: [
              {
                name: "售出数量",
                type: "bar",
                data: this.payer_num,
              },
            ],
          });
        }
      });
      let myChart2 = this.$echarts.init(document.querySelector("#main2"));
      myChart2.setOption({
        title: {
          text: "销售额",
        },
        tooltip: {},
        xAxis: {
          data: ["十二月", "一月", "二月"],
        },
        yAxis: {},
        series: [
          {
            name: "销售",
            type: "line",
            data: ["13225", "23542", "15622"],
          },
        ],
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang='scss' scoped>
.data {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 50%;
    #main1,
    #main2 {
      height: 500px;
    }
  }
}
</style>